import { View, Text, Navigator, Input } from '@tarojs/components'
import Taro, { useRouter } from '@tarojs/taro'
import { useReducer, useState } from 'react'
import { AtButton } from 'taro-ui'
import { rechargeApi } from '../../../../services/Iccard'
import { hideLoading, reducer, showLoading, showModal, showToast } from '../../../../utils'
import './index.scss'

interface Option {
    amount : number;
    reward : number;
    [key : string] : any;
}

export default () => {
    const query:any = useRouter().params
    const cardId = Number(query.cardId)

    const [formData, formDataDispatch] = useReducer(reducer, {
        selectedIndex : -1,
        amount : 0,
        customAmount : ''
    })
    
    let [optionList, setOptionList] = useState<Option[]>([{amount : 0.01, reward : 0}, {amount : 10, reward : 0}, {amount : 20, reward : 0}, {amount : 30, reward : 0}, {amount : 100, reward : 0}])

    

    function inputAmount(amount:number|string) {
        let params:{[key:string]:number|string} = {customAmount : amount, amount : amount || 0, selectedIndex : -1}
        if(amount === '' && optionList.length > 0) {
            params.selectedIndex = 0
            params.amount = optionList[0].amount
        }

        formDataDispatch(params)

    }

    async function rechargePay() {
        if(formData.amount <= 0) {
            showToast('充值金额必须大于0')
            return
        }

        showLoading()
        let res = await rechargeApi(formData.amount, cardId)
        hideLoading()
        if(res.success) {
            try {
                await Taro.requestPayment(res.data)
                
                //wallet.amount = Number((wallet.amount + formData.amount).toFixed(2))
                
                //GlobalData.wallet = wallet

                //setwallet({...wallet})

            } catch (error) {
                console.log(error)
            }
            //showToast('充值成功')
            //navigateBack()
        }else {
            showModal(res.msg)
        }

    }

    
    return <>
        <View className='page'>
            <View className='page-body p-l-r'>
                <View className='recharge-options'>
                    <View className='flex-align-items-center'>
                        <Text className='f-36 flex-1'>充值</Text>
                        <Navigator className='flex-align-items-center' url={'/userClient/pages/iccard/recharge/rechargeLog/index?cardId=' + cardId}>
                            <Text className='color-999'>充值记录</Text>
                            <View className='at-icon at-icon-chevron-right f-36 color-999'></View>
                        </Navigator>
                    </View>
                    <View className='wrap m-t-30'>
                        {
                            optionList.map((option, index) => {
                                let className = 'option'
                                if(index == formData.selectedIndex) className += ' selected'

                                return <View className={className} onClick={() => formDataDispatch({customAmount : '', selectedIndex : index, amount : option.amount})}>
                                    <View className='content'>
                                        <View>
                                            <Text className='amount'>{option.amount}</Text>
                                            <Text className='unit'>元</Text>
                                        </View>
                                        {option.reward > 0 &&
                                            <View className='reward'>赠送 {option.reward} 元</View>
                                        }
                                    </View>
                                </View>
                            })
                        }
                        <View className='option'>
                            <View className='content w-100 h-100'>
                                <Input type='digit' placeholderClass='f-24' placeholder='自定义' className='w-100 h-100 f-36' value={formData.customAmount} onInput={e => inputAmount(e.detail.value)} />
                            </View>
                        </View>
                    </View>
                </View>

                <View className='m-t-60 p-l-r'>
                    <View className='text-center'><Text className='color-999'>点击确定，即表示同意</Text><Navigator style='display:inline' className='color-primary' url=''>充值协议</Navigator></View>
                    <View className='m-t-20'>
                        <AtButton type='primary' onClick={() => rechargePay()}>确 定</AtButton>
                    </View>
                </View>

            </View>
        </View>
    </>
}